@import './_variables.less';

* {
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#app {
    font-size: @font-size-base;
    font-family: @font-family;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    // overflow: auto;
    transition: all .5s ease-in-out;
    min-height: 100vh;
    max-width: 100vw;
}

svg use {
    pointer-events: none;
}

img {
    object-fit: cover;
}

.default-theme p{
    padding: 0;
}

#nprogress .bar {
    height: 2px !important;
    opacity: 1 !important;
}

.md-editor-toolbar-wrapper .md-editor-toolbar-left,
.md-editor-toolbar-wrapper .md-editor-toolbar-right {
    flex-wrap: wrap;
}

.md-editor-toolbar-wrapper {
    height: auto;
}

/* 定义滚动条的样式 */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

/* 定义滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    background-color: @background1;
    border-radius: 5px;
}

/* 定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 5px;
}

.dark {

    html,
    body,
    #app {
        background-color: #dark-theme[background];
        color: #dark-theme[text];
    }

    /* 定义滚动条的样式 */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* 定义滚动条滑块的样式 */
    ::-webkit-scrollbar-thumb {
        background-color: #dark-theme[background];
        border-radius: 5px;
    }

    /* 定义滚动条轨道的样式 */
    ::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        border-radius: 5px;
    }
}

.m-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 2px;
        background-color: @primary;
        transition: width .3s ease-in-out, left .3s ease-in-out;
    }

    &:hover::after {
        left: 0;
        width: 100%;
    }

    &:hover {
        color: @primary;
    }
}

// flex
.m-flex {
    display: flex;
}

// flex水平垂直居中
.m-f-center {
    justify-content: center;
    align-items: center;
}

.m-f-aic {
    align-items: center;
}

.m-f-jcc {
    justify-content: center;
}

.m-f-column {
    flex-direction: column;
}

.m-f-row {
    flex-direction: row;
}

.m-f-row-reverse {
    flex-direction: row-reverse;
}

// 绝对定位居中
.m-a-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.m-a-center-0 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

// 文字垂直居中
.m-va-middle {
    vertical-align: middle;
}

.m-t-center {
    text-align: center;
}

.m-bold {
    font-weight: bold;
}

.m-c-pointer {
    cursor: pointer;
}

.m-pointer-cursor {
    cursor: pointer;
}

.m-pointer-default {
    cursor: default;
}

// 文字溢出省略号
.m-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}